<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script src="../js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			#tabs div:after {
				content: "";
				position: absolute;
				display: block;
				width: 0;
				height: .25rem;
				background-color: #282828;
				bottom: 0;
				left: 50%;
				transition: all .4s;
				transform: translate(-50%, 0);
			}
			
			#tabs div.active:after {
				width: 2.5rem;
			}
			
			em.down img {
				transform: rotateZ(180deg);
			}
			
			.item {
				justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			
			.item b {
				margin-bottom: 0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			
			.item em {
				display: block;
				width: 3.666666rem;
				height: 1.833333rem;
				border: 1px solid #666;
				border-radius: 0.549999rem;
				text-align: center;
				line-height: 1.833333rem;
				font-size: 1.166666rem;
			}
			
			#wpr {
				color: #666;
				font-size: 1.25rem;
				line-height: 1.5rem;
			}
			
			#wpr .item:nth-last-child(1) {
				border: none;
			}
			
			.back-c {
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.p-r {
				position: relative;
				line-height: 33px;
			}
			
			.left span {
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.buy {
				float: right;
				width: 7.083333rem;
				line-height: 2.5rem;
				background: -webkit-gradient(linear, center top, center bottom, from(#F7BA64), to(#ED8434));
				border-radius: 8.333333rem;
				font-size: 1.083333rem;
				color: #fff;
				text-align: center;
				box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			
			#worth p {
				font-family: .PingFangSC-Light;
				color: #282828;
				line-height: 20px;
				font-size: 1.16666rem !important;
			}
			
			#worth strong {
				font-family: .PingFangSC-Medium;
				font-size: 1.5rem !important;
				color: #282828;
			}
			
			.aui-dialog {
				width: 18rem !important;
				margin-left: -9rem !important;
				font-size: 0.95em !important;
			}
			
			.aui-dialog-body {
				font-size: 1.18em !important;
				padding: 1rem .3rem !important;
			}
			
			.aui-dialog-btn {
				height: 2.9rem;
				line-height: 2.9rem;
				font-size: 1.6rem;
			}
			
			.buymaskFade {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
			}
			
			.webkit {
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				;
			}
			
			#tabs div:after {
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			
			.clearfix :after {
				clear: both;
				content: '.';
				display: block;
				width: 0;
				height: 0;
				visibility: hidden;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="content">
		</div>
	</body>
	<script id="detail_tem" type="text/html">
		<div id="bottomRead" style="width: 100%;height: 4.5rem;border-top: 1px solid #E5E5E5;overflow: hidden;position: fixed;z-index:10;bottom: 0;left: 0;">
			<div id="beginRead" class="col-xs-6" style="width: 100%; background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.5rem;font-size:16px;color: #333; font-size: 16px;font-weight: bold;">开始听书</div>
		</div>
		
		<div id="tabToTop" style="overflow: hidden;">
			<div class="col-xs-12" style="padding-right: 12px;padding-left: 12px;height: 12.7rem;padding-top: 10px;padding-bottom: 10px;;">
				<div class="col-xs-4" style="height: 12rem;width: 29.333%;padding: 0;">
					<a href="javascript:;" style="display:block;height: 100%;">
						<img id="wxshare" src="{{data.bookimg | addUrl}}" style="box-shadow:0.1rem 0.1rem 1rem #e6e6e6;width: 100%;height: 100%;margin: 0;border: 0;vertical-align: middle;">
					</a>
				</div>
				<div class="col-xs-8" style="padding: 0 5% 0 3%;margin: 0;" onclick="">
					<div class="col-xs-12" style="padding: 0;margin: 0;">
						<p style="font-family: bolder;font-size: 1.6rem;color: #282828;margin-top: .3rem;">{{data.bookname}}</p>
						<p style="font-size: 1.3rem;color: #666666;margin-bottom: 0;margin-top: -0.5rem;">作者 : {{data.bookauthor}}</p>
						<p class="aui-ellipsis-2" style="font-size: 1.3rem;color: #666666;margin-bottom: 0;">出版社 : {{data.bookpublish}}</p>
						<p class="aui-ellipsis-2" style="font-size: 13px;color: #666666;margin-top: 0.5rem;">{{data.bookwrodnumber}}</p>
						
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12" style="padding-bottom: 5rem">
			<div id="tabs" style="height: 3.75rem;align-items: center;justify-content: space-around;font-size: 15px;color: #666;display: flex;background: #FFFFFF;">
				<div class="active" style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">详情</div>
				<div style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">章节</div>
			</div>
			<div id="detail" class="tab" style="padding: 2.5rem 0 0 0;">
				<div id="command">
					<p style="font-size: 1.5rem;color: #282828;font-family: .PingFangSC-Medium;font-weight: 700;">推荐语</p>
					<p style="font-size: 15px;color: #282828;font-weight: 500;">{{data.bookrecommend}}</p>
					<p style="font-size: 13px;color: #282828;">{{data.contentsummary}}</p>
				</div>
				<div id="content_detail" style="padding: 2.5rem 0 0 0;display:none;">
					<p style="font-size: 1.5rem;color: #282828;margin-bottom: 0;padding-bottom: 1.25rem;text-align: left;font-family: .PingFangSC-Medium;font-weight: 700;">内容简介</p>

					{{if data.mapping_small_img}}
					<div style="height: 20.2rem;padding: .83rem .83rem 0 .83rem;background: #FFFFFF;border: 1px solid #E5E5E5;">
						<img src="{{data.mapping_small_img | addUrl}}" style="width: 100%;height: 12.5rem;" />
						<div style="font-size: 12px;color: #999999;line-height: 2.9rem;height: 2.9rem;" align="center">思维导图部分截图</div>
						<div id="mindnode" data-src="{{data.mapping_img | addUrl}}" style="position: relative;font-size: 13px;color: #282828;height: 3.85rem;line-height: 3.85rem;width: 100%;text-align: left;border-top: 1px solid #E5E5E5;">购买后查看完整思维导图
							<img src="../icon/more.png" alt="" style="width: 1.67rem;height: 1.67rem;position: absolute;top:50%;transform: translateY(-50%);right: 1.67rem;" />
						</div>
					</div>
					{{/if}}
					<div id="worth" style="padding: 2.5rem 0 0 0;">
						{{@data.content}}
					</div>
				</div>

				<div class="clearfix">
					<em id="open" class="col-xs-12" align="center" style="padding: 2rem 0 2rem 0;"><var>展开</var> <img src="../icon/next.png" style="width:1.67rem;display: inline;" alt=""></em>
				</div>
			</div>
			<div class="col-xs-12" style="height: 0.5rem;width: 100%;background-color:#F8F8F8"></div>
			<div id="meun" class="tab" style="padding-top: 2.5rem;">
				<span style="display: block;color: #282828;font-weight: 700;font-size: 18px;">章节目录</span>
				<div id="wpr">
					{{each data.bookchapter_list}}
					<div class="item flex"  data-chapterid={{$value.chapterid}}>
						<div style="display: block;width: 100%;">
							<b class="aui-ellipsis-1">{{$value.chapternumber}}　{{$value.chaptername}}</b>
							<img src="../icon/people.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;">{{data.reference_click_count | release $index $value.virtual_click_count}}人读过
							{{if progessArr[$index] != 0}}
							<img src="../icon/time.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;margin-left: 1.7rem;">{{$value.chapterduration + " " + progessArr[$index]}}
							{{else}}
							<img src="../icon/time.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;margin-left: 1.7rem;">{{$value.chapterduration}}
							{{/if}}
						</div>
					</div>
					{{/each}}
				</div>
				</div>
					<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 1000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>
				</div>
	</script>
</html>

<script src="../js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/purl.js"></script>
<script src="../js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/wechat_common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	var dialog = new auiDialog();
	var toast = new auiToast();
	var bookData = null;
	var videoauthorid = GetQueryString('videoauthorid');
	var copywriter = GetQueryString('copywriter');
	var slideState = 1;
	
	var bookId = GetQueryString('bookid');
	
	var unionid=GetQueryString('unionid');
	if (!unionid) {
		unionid="";
	}
	var token = GetQueryString('token');
	if (!token) {
		token = "0";
	}
	
	template.defaults.imports.timeFormat=function(str){  
	    var date=str.split(' ')[0];
		var dateStr=date.split('-')[1]+'-'+date.split('-')[2];
		var time=str.split(' ')[1]
		var timeStr=time.split(':')[0]+':'+time.split(':')[1];
		return dateStr+' '+timeStr
	}
	
	template.defaults.imports.release = function(data, index, count) {
		
		if (!count) {
			count = 0;
		}
		
		if (!data) {
			data = 0;
		}
		
		if(index < 6) {
			return Math.floor(data * (0.8 - index * 0.05)) + count;
		} else if(index >= 6 && index < 16) {
			return Math.floor(data * (0.5 - (index - 6) * 0.02)) + count;
		} else {
			return Math.floor(data * (0.3 - (index - 16) * 0.01)) + count;
		}
	}

	template.defaults.imports.addFaceUrl = function(value) {
		if(value == "" || value == null) {
			return "../img/book.png"
		} else {
			if(checkURL(value)) {
				return value;
			} else {
				return imgFaceurl + value
			}
		}
	};
	
	function checkURL(str) {
		if(str.match(/(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/i) == null) {
			return false
		} else {
			return true;
		}
	}

	function colpase() {
		$('#open').click(function() {
			if(slideState != 1) {
				$(this).addClass('down').find('var').text('收起');
				$("#content_detail").show();
			} else {
				$(this).removeClass('down').find('var').text('展开');
				$("#content_detail").hide();
				$('body').animate({
					scrollTop: 0
				}, 300, 'swing')
			}
			slideState = !slideState;
		})
		$('#open').trigger('click');
	}

	template.defaults.imports.timestamp = function(value) {
		return Date.parse(new Date(value))
	};

	$(function() {
		
		function after() {
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "get",
				url: ascli(hostUrl + "bookreading/detail?token=" + token + "&bookid=" + bookId) + "&copywriter=" + copywriter + "&videoauthor=" + videoauthorid,
				async: true,
				success: function(data) {
					
					if (window.localStorage) {
						var progess;
						var progessArr = new Array();
						for (var i = 0; i < data.data.bookchapter_list.length; i ++) {
							var value = localStorage.getItem(bookId + "_" + i);
							if (value) {
								var currentTime = parseInt(value.split("_")[0]);
							    var duration = parseInt(value.split("_")[1]);
							    if (currentTime > 0 && duration > 0) {
							    	if (currentTime >= duration) {
							    		progess = "已听完"
							    	}else {
							    		progess = "已听" + parseInt((currentTime * 100) / duration) + "%";
							    	}
							    }else {
							    	   progess = "0";
							    }
							}else {
								progess = "0";
							}
							progessArr.push(progess);
					    }
					}
					data.progessArr = progessArr;//音频播放百分比
					
					bookname=data.data.bookname;
					bookimg=data.data.bookimg;
					bookrecommend=data.data.bookrecommend;
					$("title").text(data.data.bookname);
					$("#worth").html(data.data.content);
					var html = template("detail_tem", data);
					document.getElementById('content').innerHTML = html;
					colpase();
					myScrollTo();
					
					$('#tabs div').on('click', function(e) {
								
								$('#tabs div').removeClass('active');
								$(this).addClass('active');
								var zIndex = $(this).index();
								zTop = $('.tab').eq(zIndex).offset().top;
								
								if(zIndex == 0) {
									$('body').animate({
										scrollTop: 0
									}, 300, 'swing')
								} else {
									$('body').animate({
										scrollTop: zTop - 70
									}, 300, 'swing')
								}
							});
							toast.hide();
					bookData = data;
				}
			});
		}
		after();
		
		//开始听书
		$('body').on('click', '#beginRead', function() {
			var url="chapter.html?bookid=" + bookId + "&bookname="+bookname+"&bookimg=" + bookimg+ "&videoauthorid=" + videoauthorid + "&copywriter=" + copywriter + "&unionid=" +  unionid;
			location.href = url
		})
		
		//书籍统计
		$.ajax({
			type: "get",
			url: 　hostUrl + "statistics/book_count?channel=weixin&unionid=" + unionid + "&bookid=" + bookId,
			async: true,
			success: function(data) {
			}
		});
		
		
		$("#content").on('click', '#mindnode', function() {
			window.location.href = "mind.html?src=" + $(this).attr('data-src') + "&bookname=" + Q.encode($("#bookname").text());
		})
		$("#content").on("click", "#wpr .item", function() {
			var chapterIndex = $(this).index();
			var url="chapter.html?bookid=" + bookId + "&chapterIndex=" + chapterIndex + "&unionid=" +  unionid;
            location.href = url;
		})
		
		$("#content").on('click', '.buy', function(e) {
			var url="chapter.html?bookid=" + bookId + "&unionid=" +  unionid;
			location.href = url
		})
	})
	
	function myScrollTo(cur) {
		window.onscroll = function() {
			var t = document.documentElement.scrollTop || document.body.scrollTop;
			var heigt = $("header").height();
			var hei1 = $("#tabToTop").height();
			var zong = heigt + hei1;

			if(t >= hei1) {
				$("#tabs").css({
					"position": "fixed",
					"top": "0px",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});
				$("#detail").css("margin-top", "3.75rem");
			} else {
				$("#tabs").css({
					"position": "relative",
					"top": "0",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});
				$("#detail").css("margin-top", "0");
			}

			if(t <= $('.tab').eq(1).offset().top - 130) {
				$('#tabs div').removeClass('active');
				$('#tabs div').eq(0).addClass('active');
			} else {
				$('#tabs div').removeClass('active');
				$('#tabs div').eq(1).addClass('active');
			}
		}
	}
	var isPageHide = false;
        window.addEventListener('pageshow', function () {
        	  setTimeout(function(){
        	  	if (isPageHide) {
              location.reload()
            }
		  },500)
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
</script>